<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>

<body>
  <button>发送请求</button>

  <script>
    /**
     * 拦截器: 本质就是回调函数
     *    请求拦截器
     *    响应拦截器
     * 作用: 封装公共操作, 简化代码
     * 请求拦截器(回调函数): 在发送请求前, 自动执行. 将一些请求前的准备工作, 放在请求拦截器中
     *    * 携带公共参数 
     *    * 检测参数是否正确
     *    * loading 效果的呈现
     * 响应拦截器(回调函数): 在响应结果返回之后, 自动执行. 将一些响应后的公共操作, 放在响应拦截器中
     *    * 数据转化
     *    * 错误处理
     *    * loading 效果的关闭
     */

    //为 axios 添加请求拦截器
    axios.interceptors.request.use((config) => {
      //请求拦截器成功回调
      // console.log('请求拦截器成功 - 执行');
      //请求头中添加公共参数 token
      // config.headers.token = 'x21241241241';
      // throw '参数缺失';
      //如果请求拦截器没有出现错误, 必须要返回 config 对象
      return config;
    }, error => {
      //请求拦截器失败的回调
      throw error;
    });

    //为 axios 添加响应拦截器
    axios.interceptors.response.use(response => {
      console.log('响应拦截器成功 - 执行');
      //返回 response  转换响应结果
      return response.data;
    }, (error) => {
      //对错误进行统一处理
      console.log('请求出问题啦~', error);
      // throw error;
      return new Promise(() => {});
    });

    //获取按钮
    let btn = document.querySelector('button');

    btn.onclick = async function () {
      let res = await axios.get('http://api.xiaohigh.com/herosx')
    }

  </script>
</body>

</html>